<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .parent{
      border: 1px solid black;
      display: flex;
      /*flex-direction: row;!*默认*!*/
      /*flex-direction: row-reverse;!*从右到左*!*/
      /*flex-direction: column;!*从上到下*!*/
      /*flex-direction: column-reverse;!*从下到上*!*/
      justify-content: space-around;
    }

    .child{
      background: skyblue;
    }

  </style>
</head>
<body>
<div class="parent">
  <a class="child">A</a>
  <a class="child">B</a>
  <a class="child">C</a>
  <a class="child">D</a>
</div>
</body>
</html>
